<!--
    * @Author: whq
    * @Date: 2022-12-28 11:28:13
 * @LastEditTime: 2023-12-04 17:49:24
 * @LastEditors: whq
    * @Description: 
 * @FilePath: \pc-web-zjalny\src\view\HomePage\index.vue
   -->
<template>
  <div id="HomePage">
    <!-- 轮播图部分 -->
    <div class="rotograph">
      <swiper
        :slidesPerView="1"
        :spaceBetween="30"
        :loop="true"
        :centeredSlides="true"
        :pagination="{
          clickable: true,
        }"
        :autoplay="{
          delay: 2500,
          disableOnInteraction: false,
        }"
        :navigation="true"
        :modules="modules"
        class="mySwiper"
      >
        <swiper-slide><img src="https://media-cdn-zspms.kurogame.com/pnswebsite/website2.0/images/1700755200000/yza5m498lnt06nbb0o-170081796343901.png" alt="" /></swiper-slide>
        <swiper-slide
          ><img src="https://media-cdn-zspms.kurogame.com/pnswebsite/website2.0/images/1700755200000/6k3tmgvaz6lg35ukor-170081792044703.png" alt=""
        /></swiper-slide>
        <swiper-slide><img src="https://media-cdn-zspms.kurogame.com/pnswebsite/website2.0/images/1700755200000/p2d8zyn0ufabnisp5v-170081778339006.png" alt="" /></swiper-slide>
        <swiper-slide><img src="https://media-cdn-zspms.kurogame.com/pnswebsite/website2.0/images/1700755200000/vejrt09bpa1sm2ynek-170081760182912.png" alt="" /></swiper-slide>
      </swiper>
    </div>
    <div class="comm">
      <div id="reveal-top" class="animated slideInLeft anibox">123123</div>
      <div id="reveal-top" class="animated swing anibox">123123</div>
      <div id="reveal-top" class="animated jello anibox">123123</div>
      <div id="reveal-top" class="animated backInRight anibox">123123</div>
      <div id="reveal-top" class="animated backOutDown anibox">123123</div>
      <div id="reveal-top" class="animated backOutDown anibox">123123</div>
      <div id="reveal-top" class="animated bounceInDown anibox">123123</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import globals from "@/store/globals";
import ScrollNumber from "../components/ScrollNumber.vue";
import { ref, onMounted, reactive } from "vue";
import scrollReveal from "scrollreveal";
import type { TabsPaneContext } from "element-plus";
import { Swiper, SwiperSlide } from "swiper/vue"; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from "swiper";
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const data = reactive({
  // 在reactive()中声明scrollReveal组件
  scrollReveal: scrollReveal(),
});
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [Autoplay, Pagination, Navigation, A11y];
// 设置scrollReveal的方法
const retScroll = () => {
  // reveal()的类名可以为id (#reveal-top) 也可以为class(.reveal-top) 名称随意 并且也支持并集class写法 注意必须设置类否则无法使用
  data.scrollReveal.reveal("#reveal-top", {
    // 动画的时长
    duration: 600,
    // 延迟时间
    delay: 500,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: "bottom",
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: 'onload',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: "10px",
    // 其他可用的动画效果
    opacity: 0.001,
    // 执行速度 线性函数啥的
    easing: "cubic-bezier(0.5, 0, 0, 1)",
    // 执行方式（缩放）
    scale: 0.9,
    // 使用执行之前的回调函数
    beforeReveal: (ele: any) => {
      console.log(1);
    },
  });
};
const onSwiper = (swiper: any) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};
onMounted(() => {
  // 启动scrollReveal的方法
  retScroll();
  console.log(globals().getLanguage);
});
</script>
<style lang="scss" scoped>
@import "./index.scss";

.mySwiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.mySwiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

//这里使用的:deep样式穿透
:deep(.swiper-pagination) .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(229, 180, 127);
}

:deep(.swiper-pagination-bullet) {
  width: 14px;
  height: 14px;
  background-color: #fff;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
:deep(.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
  margin: 0 8px;
}

:deep(.swiper-button-prev),
:deep(.swiper-button-next) {
  color: rgb(229, 180, 127);
}
</style>
